<template>
  <div id="app">
    <DataText></DataText>
    <DataText></DataText>
    <DataText></DataText>
    <DataText></DataText>
    <div style="border: 3px solid pink; margin: 10px;">
      dad
      <SonText :title="MyText" @changeTitle="handleChange"></SonText>
    </div>
    <UserInfo :username = 'username' :age="age" :car="car" :hobby="hobby">
    </UserInfo>
    <TextDome :w="width"></TextDome>
    <BaseProgress :w="width"></BaseProgress>
    <DataTextProp :count="count" @changeCount="handleChangeTwo"></DataTextProp>
    <BaseA></BaseA>
    <BaseB></BaseB>
    <BaseC></BaseC>
    
  </div>
</template>

<script>
import DataText from './components/DataText.vue';
import SonText from './components/SonText.vue';
import UserInfo from './components/UserInfo.vue';
import TextDome from './components/TextDome.vue';
import BaseProgress from './components/BaseProgress.vue';
import DataTextProp from './components/DataTextProp.vue';
import BaseA from './components/BaseA.vue';
import BaseB from './components/BaseB.vue';
import BaseC from './components/BaseC.vue';
export default {
  name: 'App',
  data() {
    return {
      count : 999,
      width : 100,
      MyText: "一一",
      username: '小明',
      age: 28,
      car: {
        brand: '马车',
      },
      hobby: ['篮球', '足球', '网球']
    }
  },
  methods: {
    handleChange(newTitle) {
      //console.log(newTitle);
      this.MyText = newTitle

    },
    handleChangeTwo(newCount){
      this.count=newCount
    }
  },

  components: {
    DataText,
    SonText,
    UserInfo,
    TextDome,
    BaseProgress,
    DataTextProp,
    BaseA,
    BaseB,
    BaseC

  }

}
</script>

<style></style>